<template>
  <view class="complaint-submit-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <view class="gradient-bg" :style="{ top: navBarHeight + 'px' }"></view>
    <CustomNavbar title="我要投诉" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 表单卡片 -->
      <view class="form-card">
        <!-- 地区 -->
        <view class="form-item">
          <text class="form-label">地区</text>
          <picker 
            mode="selector" 
            :range="regions" 
            :value="regionIndex"
            @change="onRegionChange"
          >
            <view class="form-input-wrapper picker-wrapper">
              <input 
                class="form-input" 
                type="text" 
                placeholder="请选择"
                :value="regionIndex >= 0 ? regions[regionIndex] : ''"
                disabled
              />
              <image class="arrow-icon" src="/static/icons/icon-right.png" mode="aspectFit" />
            </view>
          </picker>
        </view>
        
        <!-- 手机号码 -->
        <view class="form-item">
          <text class="form-label">手机号码</text>
          <input 
            class="form-input" 
            type="text" 
            placeholder="请输入11位手机号或者区号+固话"
            v-model="formData.phone"
            maxlength="20"
          />
        </view>
        
        <!-- 联系人 -->
        <view class="form-item">
          <text class="form-label">联系人</text>
          <input 
            class="form-input" 
            type="text" 
            placeholder="请输入"
            v-model="formData.contact"
            maxlength="50"
          />
        </view>
        
        <!-- 联系电话 -->
        <view class="form-item">
          <text class="form-label">联系电话</text>
          <input 
            class="form-input" 
            type="text" 
            placeholder="请输入"
            v-model="formData.contactPhone"
            maxlength="20"
          />
        </view>
        
        <!-- 投诉内容 -->
        <view class="form-item">
          <text class="form-label">投诉内容</text>
          <view class="textarea-wrapper">
            <textarea 
              class="form-textarea" 
              placeholder="请输入投诉内容 (200字以内)"
              v-model="formData.content"
              maxlength="200"
              :show-confirm-bar="false"
            ></textarea>
            <view class="char-count">{{ formData.content.length }}/200</view>
          </view>
        </view>
      </view>
      
      <!-- 温馨提示 -->
      <!-- <view class="tips-card">
        <view class="tips-title">温馨提示</view>
        <view class="tips-content">
          <text>尊敬的客户若你遇"业务隐私政策、服务协议"等投诉问题,可发送邮件进行举报。</text>
          <text class="tips-email">邮箱地址: ctpip.xj@chinatelecom.cn。</text>
        </view>
      </view> -->
      <!-- 温馨提示 -->
      <view class="tips-section">
        <view class="section-header">
          <view class="section-line"></view>
          <text class="section-title">温馨提示</text>
        </view>
        <view class="tips-content">
          <text class="tips-text">尊敬的客户若你遇"业务隐私政策、服务协议"等投诉问题,可发送邮件进行举报。</text>
          <text class="tips-text">邮箱地址: ctpip.xj@chinatelecom.cn。</text>
        </view>
      </view>

      <!-- 底部按钮 -->
    <view class="button-group">
        <button class="cancel-btn" @click="handleCancel">取消</button>
        <button class="confirm-btn" @click="handleConfirm">确定</button>
      </view>
    </view>
    
    
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CustomNavbar from '@/components/CustomNavbar.vue'
import { api } from '@/utils/api'

const navBarHeight = ref(80)
const regionIndex = ref(-1)
const regions = ref(['乌鲁木齐', '克拉玛依', '吐鲁番', '哈密', '昌吉', '博乐','巴州','阿克苏','克州','喀什','和田','伊犁','奎屯', '塔城', '阿勒泰','石河子'])
const regionsCode = ref(['0991', '0990', '0995', '0902', '0994', '0909','0906','0997', '0908','0998','0903','0999','0992', '0901', '0906','0993'])

const formData = ref({
  phone: '',
  contact: '',
  contactPhone: '',
  content: ''
})

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44
})

// 地区选择
const onRegionChange = (e) => {
  regionIndex.value = e.detail.value
}

// 取消
const handleCancel = () => {
  uni.navigateBack()
}

// 确定提交
const handleConfirm = async () => {
  // 表单验证
  if (regionIndex.value < 0) {
    uni.showToast({
      title: '请选择地区',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!formData.value.phone) {
    uni.showToast({
      title: '请输入手机号码',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!formData.value.contact) {
    uni.showToast({
      title: '请输入联系人',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!formData.value.contactPhone) {
    uni.showToast({
      title: '请输入联系电话',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!formData.value.content || formData.value.content.trim().length === 0) {
    uni.showToast({
      title: '请输入投诉内容',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (formData.value.content.trim().length < 10) {
    uni.showToast({
      title: '投诉内容至少10个字',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  // try {
  // {"number": sjh, "city": city, "tel": tel, "cuname": cuname, "remark": remark,"status": wxtype},
    // 调用提交投诉接口
    const submitData = {
      city: regionsCode.value[regionIndex.value],
      number: formData.value.phone,
      cuname: formData.value.contact,
      tel: formData.value.contactPhone,
      remark: formData.value.content.trim(),
      status:5
    }
    
    // 这里调用实际的API接口
    // const res = await api.submitComplaint(submitData)
    api.dxtxworkOrder(submitData).then(res => {
      console.log('提交投诉工单成功: ',res)
      if(res.code == 200){
        uni.showToast({
          title: '提交成功' || res.msg,
          icon: 'success',
          duration: 2000
        })
        
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 2000)
      }else{
        uni.showToast({
          title: res.msg || '提交投诉工单失败',
          icon: 'none',
          duration: 2000
        })
      }
    })



    
    
    // // 模拟提交成功
    // uni.showToast({
    //   title: '提交成功',
    //   icon: 'success',
    //   duration: 2000
    // })
    
    // // 延迟返回上一页
    // setTimeout(() => {
    //   uni.navigateBack()
    // }, 2000)
    
  // } catch (error) {
  //   console.error('提交投诉失败:', error)
  //   uni.showToast({
  //     title: '提交失败，请重试',
  //     icon: 'none',
  //     duration: 2000
  //   })
  // }
}
</script>

<style scoped>
.complaint-submit-page {
   
  position: relative;
  /* background-color: #F8F8F8; */
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

.gradient-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(40rpx);
  background: rgba(255, 255, 255, 0.8);
}

.page-content {
  position: relative;
  z-index: 2;
  padding: 30rpx;
  padding-bottom: 160rpx;
}

.form-card {
  /* background: #ffffff; */
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  /* margin-bottom: 30rpx; */
  /* box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); */
}

.form-item {
  margin-bottom: 24rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 16rpx;
}

.form-input-wrapper {
  position: relative;
  width: 100%;
}

.form-input {
  width: 100%;
  height: 88rpx;
  /* background: #F5F5F5; */
  border-radius: 16rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
border: 1px solid rgba(204, 204, 204, 1);
}

.form-input::placeholder {
  color: rgba(153, 153, 153, 1);
  font-family: HarmonyOS Sans SC;
font-size: 14px;
font-weight: 400;
line-height: 16px;
}

.picker-wrapper {
  display: flex;
  align-items: center;
}

.picker-wrapper .form-input {
  flex: 1;
}

.arrow-icon {
  width: 32rpx;
  height: 32rpx;
  flex-shrink: 0;
  position: absolute;
  right: 24rpx;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
}

.textarea-wrapper {
  position: relative;
  width: 100%;
  /* background: #F5F5F5; */
  /* border-radius: 12rpx;
  padding: 24rpx; */
  min-height: 200rpx;
}

.form-textarea {
  width: 100%;
  min-height: 200rpx;
  font-size: 28rpx;
  color: #333333;
  line-height: 1.6;
  box-sizing: border-box;
border: 1px solid rgba(204, 204, 204, 1);
border-radius: 16rpx;
padding: 24rpx;
}

.form-textarea::placeholder {
  color: #999999;
}

.char-count {
  position: absolute;
  bottom: 24rpx;
  right: 24rpx;
  font-size: 24rpx;
  color: #999999;
}


.footer-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  z-index: 100;
}

.cancel-btn,
.confirm-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 500;
  border: none;
  margin: 0 10rpx;
}

.cancel-btn {
  background: #ffffff;
  color: #333333;
  border: 2rpx solid #E5E5E5;
}

.cancel-btn:active {
  background: #F5F5F5;
}

.confirm-btn {
  background: #1C65F0;
  color: #ffffff;
}

.confirm-btn:active {
  background: #1558D6;
}
/* 温馨提示 */
.tips-section {
  /* margin-top: 40rpx; */
}

.section-header {
  display: flex;
  align-items: center;
  /* margin-bottom: 24rpx; */
}

.section-line {
  width: 8rpx;
  height: 40rpx;
  background: rgba(78, 138, 254, 1);
  border-radius: 4rpx;
  margin-right: 16rpx;
}

.section-title {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 38rpx;
}

.tips-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding: 24rpx 32rpx;
  /* background: rgba(255, 255, 255, 1); */
  border-radius: 16rpx;
}

.tips-text {
  color: rgba(153, 153, 153, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 28rpx;
}
/* 底部按钮 */
.button-group {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 24rpx;
  padding: 32rpx;
}

.cancel-btn,
.confirm-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 88rpx;
  text-align: center;
  border: none;
}

.cancel-btn {
  background: rgba(255, 255, 255, 1);
  color: rgba(78, 138, 254, 1);
  border: 2rpx solid rgba(78, 138, 254, 1);
}

.confirm-btn {
  background: rgba(78, 138, 254, 1);
  color: rgba(255, 255, 255, 1);
}

.cancel-btn::after,
.confirm-btn::after {
  border: none;
}

.cancel-btn:active,
.confirm-btn:active {
  opacity: 0.8;
}
</style>

